<template>
  <div>
    <min-bread :bread="bread"></min-bread>
    <min-table
      :minTable="minTable"
      :searchList="searchList"
      :cols="cols"
      :sendBtn="sendBtn"
      :minForm="minForm"
      :pageInfo="pageInfo"
      @min-operator="handleOperator"
      @min-handle="onHandle"
      @min-search="onSearch"
      @min-schange="onSchange"
      @min-page="handleCurrentPage"
      @min-size="handlePageSize"
      @min-select="handleSelect"
      @min-select-all="handleSelectAll"
    ></min-table>
    <el-drawer title="详情" :visible.sync="drawer" direction="rtl" size="40%">
      <el-card>
        <el-timeline>
          <el-timeline-item timestamp="2018/4/12" placement="top">
            <el-card>
              <h4>申请频谱资源：11M-66M</h4>
              <p>王小虎 提交于 2018/4/12 20:46</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/3" placement="top">
            <el-card>
              <h4>王晓飞 同意申请</h4>
              <p>王晓飞 提交于 2018/4/3 21:46</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/2" placement="top">
            <el-card>
              <h4>王大叁 正在审批</h4>
              <p>王大叁 提交于 2018/4/2 22:46</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 分页信息
      pageInfo: {
        show: true,
        currentPage: 0,
        total: 0,
        pageSize: 10
      },
      drawer: false,
      userDetail: {
        baseUserForm: {},
        data: []
      },
      // 查询栏数组
      searchList: [
        {
          com: "input",
          prop: "categoryName",
          label: "范围",
          inputType: "text"
        }
      ],
      // 面包屑
      bread: {
        subTitle: "我的申请"
      },
      sendBtn: [],
      // 表格
      minTable: {
        loading: false,
        tableData: [
          {
            id: 1,
            disName: "上海铭悦软件公司",
            anotherNumber: "18365206754",
            accountNumber: "王小虎",
            industryId: "软件行业",
            another: "892829045@qq.com",
            anotherLabel: [
              {
                label: "潜力股",
                remark: "这是一个很有潜力的",
                hasRemark: true
              },
              {
                label: "销售人才"
              }
            ],
            remark: "启用"
          },
          {
            id: 3,
            disName: "上海铭悦软件公司",
            anotherNumber: "18365206754",
            accountNumber: "王小虎",
            industryId: "软件行业",
            another: "892829045@qq.com",
            anotherLabel: [
              {
                label: "潜力股",
                remark: "这是一个很有潜力的",
                hasRemark: true
              },
              {
                label: "销售人才"
              }
            ],
            remark: "封存"
          },
          {
            id: 4,
            disName: "上海铭悦软件公司",
            anotherNumber: "18365206754",
            accountNumber: "王小虎",
            industryId: "软件行业",
            another: "892829045@qq.com",
            anotherLabel: [
              {
                label: "潜力股",
                remark: "这是一个很有潜力的",
                hasRemark: true
              },
              {
                label: "销售人才"
              }
            ],
            remark: "启用"
          }
        ]
      },
      // 表头数据
      cols: [
        {
          prop: "disName",
          label: "用户名称"
        },
        {
          prop: "industryId",
          label: "所属公司"
        },
        {
          prop: "anotherNumber",
          label: "用户电话"
        },
        {
          prop: "another",
          label: "用户邮箱",
          width: "180"
        },
        {
          prop: "remark",
          label: "使用频段"
        },
        {
          type: "btn",
          label: "操作",
          btnData: [
            {
              type: "text",
              size: "mini",
              iconName: "CP_search",
              operatTitle: "查看"
            }
          ]
        }
      ],
      // 查询栏表单
      minForm: {}
    };
  },
  created() {
    // 初始化数据
    this.getInfo();
  },
  methods: {
    // 获取数据
    getInfo() {
      let params = {};
      // this.minTable.loading = true;;
      // this.$http
      //   .post("", params)
      //   .then(el => {
      //     this.minTable.loading = false;;
      //   })
      //   .catch(err => {
      //     this.minTable.loading = false;;
      //   });
    },
    // 查询
    onSearch() {
      console.log(this.minForm, "formdata");
      this.getInfo();
    },
    // 表格按钮操作
    handleOperator(index, row, operatTitle) {
      // 打开查看详情侧边栏
      this.drawer = true;
    },
    // 操作栏操作
    onHandle(i) {
      console.log(i, "操作栏");
      if (i.label === "添加") {
        this.$router.push("/addUser");
      }
    },
    // 分页事件
    handleCurrentPage(val) {
      console.log(val, "cpage");
    },
    handlePageSize(val) {
      console.log(val, "ppage");
    },
    // 全选
    handleSelectAll(selection) {
      console.log(selection, "selection");
    },
    // 选择事件
    handleSelect(selection, val) {
      console.log(selection, val, "selectionval");
    },
    // 下拉框改变方法
    onSchange(val) {
      console.log(val, "colItem");
    }
  }
};
</script>
<style scoped>
</style>
